<template>
	<bigScreenContainer>
		<div class="HomePageClass">
			<!-- header -->
			<div class="page_header" :style="{
                background: `url(${componentContent.imageMap['bg_head']}) no-repeat`,
                'background-size': '100% 100%',
            }">
				<span>腾 洋 质 量 驾 驶 舱</span>
			</div>
			<div class="homeContent">
				<div class="homeBody">
					<div class="home_top">
						<div class="l_left">
							<com-box titTxt="检验及时率" :tabData="title1">
								<div class="chart_" ref="jianyanjishilvDom" key="jianyanjishilvDom"></div>
							</com-box>
							<com-box titTxt="生产合格率统计" :tabData="title2" :value.sync="area2" @tabChange="tabChange2">
								<div class="chart_" v-if="area2 == '累计一次加工合格'" ref="leijiyicijiagonghegeDom"
									key="leijiyicijiagonghegeDom"></div>
								<div class="chart_" v-else-if="area2 == '报废品率'" ref="baofeipinlvDom"
									key="baofeipinlvDom"></div>
								<div class="chart_" v-else-if="area2 == '产品合格率'" ref="chanpinhegelvDom"
									key="chanpinhegelvDom"></div>
							</com-box>
						</div>
						<div class="l_center">
							<com-box titTxt="检验统计" :tabData="title3" :value.sync="area3" @tabChange="tabChange3">
								<div class="chart_" v-if="area3 == '检验产品总数'" ref="jianyanchanpinzongshuDom"
									key="jianyanchanpinzongshuDom"></div>
								<div class="chart_" v-else-if="area3 == '累计合格'" ref="leijihegeDom" key="leijihegeDom">
								</div>
								<div class="chart_" v-else-if="area3 == '累计不合格'" ref="leijibuhegeDom"
									key="leijibuhegeDom"></div>
							</com-box>
							<com-box titTxt="工序合格率" :tabData="title4">
								<div class="chart_" ref="gongxuhegelvDom" key="gongxuhegelvDom"></div>
							</com-box>
						</div>
						<div class="l_right">
							<com-box titTxt="客诉情况">
								<div class="table_">
									<div class="table-wrapper">
										<!-- 表头固定 -->
										<div class="table-header">
											<el-table :data="tableDataNull" style="width: 100%" :row-class-name="tableRowClassName
                                                ">
												<el-table-column prop="kskh" label="客诉客户" width="150">
												</el-table-column>
												<el-table-column prop="ksnr" label="客诉内容">
												</el-table-column>
												<el-table-column prop="jd" label="进度" width="80">
												</el-table-column>
												<el-table-column prop="jjfs" label="解决方式" width="120">
												</el-table-column>
											</el-table>
										</div>
										<!-- 表格内容可滚动 -->
										<div class="scroll-wrapper" :style="{
                                            transform: `translateY(-${scrollPosition1}px)`,
                                            transition: isSmooth
                                                ? 'transform 1s linear'
                                                : 'none',
                                        }" @transitionend="onTransitionEnd1">
											<el-table :data="extendedData1" style="
                                                    width: 100%;
                                                    height: 100%;
                                                " ref="table1" :show-header="false" :row-class-name="tableRowClassName1
                                                    ">
												<el-table-column prop="kskh" label="客诉客户" width="150">
												</el-table-column>
												<el-table-column prop="ksnr" label="客诉内容">
												</el-table-column>
												<el-table-column prop="jd" label="进度" width="80">
												</el-table-column>
												<el-table-column prop="jjfs" label="解决方式" width="120">
												</el-table-column>
											</el-table>
										</div>
									</div>
								</div>
							</com-box>
							<com-box titTxt="不合格分布" :tabData="title6" :value.sync="area6" @tabChange="tabChange6">
								<div class="w_box" v-if="area6 == '问题类型分布'">
									<div class="w_left">
										<div class="title">
											问题类型分布占比
										</div>
										<div class="w_chart">
											<div class="chart_" ref="wentileixingfenbuzhanbiDom"
												key="wentileixingfenbuzhanbiDom"></div>
										</div>
									</div>
									<div class="w_right">
										<div class="title">解决措施</div>
										<div class="w_chart">
											<div class="chart_" ref="jiejuecuoshiDom" key="jiejuecuoshiDom"></div>
										</div>
									</div>
								</div>
								<div class="w_box" v-else-if="area6 == '责任分布'">
									<div class="w_left">
										<div class="title">
											不合格品责任分布占比
										</div>
										<div class="w_chart">
											<div class="chart_" ref="buhegezerenfenbuzhanbiDom"
												key="buhegezerenfenbuzhanbiDom"></div>
										</div>
									</div>
									<div class="w_right">
										<div class="title">最终结果</div>
										<div class="w_chart">
											<div class="chart_" ref="zuizhongjieguoDom" key="zuizhongjieguoDom"></div>
										</div>
									</div>
								</div>
							</com-box>
						</div>
					</div>
					<div class="home_bottom">
						<div class="l_left">
							<com-box titTxt="检验进度">
								<div class="b_box">
									<div class="left">
										<div class="title">
											<span>生产检验任务总数</span><label>{{ jyjd.sczs || 0 }} 件</label>
										</div>
										<div class="content">
											<div class="block bg1">
												<i><img
                                                        :src="componentContent.imageMap['icon-qua1']" /></i><span>已完成任务数</span><label>{{
                                                            jyjd.scywcrws || 0
                                                    }}
                                                    件</label>
											</div>
											<div class="block bg1">
												<i><img
                                                        :src="componentContent.imageMap['icon-qua2']" /></i><span>待派发任务数</span><label>{{
                                                            jyjd.scdpfrws || 0
                                                    }}
                                                    件</label>
											</div>
											<div class="block bg2">
												<i><img
                                                        :src="componentContent.imageMap['icon-qua3']" /></i><span>执行中任务数</span><label>{{
                                                            jyjd.sczxzrws || 0
                                                    }}
                                                    件</label>
											</div>
											<div class="block bg2">
												<i><img
                                                        :src="componentContent.imageMap['icon-qua4']" /></i><span>超期任务数</span><label>{{
                                                            jyjd.sccqrws || 0
                                                    }}
                                                    件</label>
											</div>
										</div>
									</div>
									<div class="right">
										<div class="title">
											<span>来料检验任务总数</span><label>{{ jyjd.llzs || 0 }} 件</label>
										</div>
										<div class="content">
											<div class="block bg3">
												<i><img
                                                        :src="componentContent.imageMap['icon-qua5']" /></i><span>已完成任务数</span><label>{{
                                                            jyjd.llywcrws || 0
                                                    }}
                                                    件</label>
											</div>
											<div class="block bg3">
												<i><img
                                                        :src="componentContent.imageMap['icon-qua6']" /></i><span>待派发任务数</span><label>{{
                                                            jyjd.lldpfrws || 0
                                                    }}
                                                    件</label>
											</div>
											<div class="block bg4">
												<i><img
                                                        :src="componentContent.imageMap['icon-qua7']" /></i><span>执行中任务数</span><label>{{
                                                            jyjd.llzxzrws || 0
                                                    }}
                                                    件</label>
											</div>
											<div class="block bg4">
												<i><img
                                                        :src="componentContent.imageMap['icon-qua8']" /></i><span>超期任务数</span><label>{{
                                                            jyjd.llcqrws || 0
                                                    }}
                                                    件</label>
											</div>
										</div>
									</div>
								</div>
							</com-box>
						</div>
						<div class="l_right">
							<com-box titTxt="检验问题原因分析">
								<div class="table_2">
									<div class="table-wrapper">
										<div class="table-header">
											<el-table :data="tableDataNull" style="width: 100%" :row-class-name="tableRowClassName
                                                ">
												<el-table-column prop="yy" label="问题原因" width="180">
												</el-table-column>
												<el-table-column prop="gs" label="出现比例" width="180">
												</el-table-column>
												<el-table-column prop="jy" label="优化建议">
												</el-table-column>
											</el-table>
										</div>
										<div class="scroll-wrapper" :style="{
                                            transform: `translateY(-${scrollPosition}px)`,
                                            transition: isSmooth
                                                ? 'transform 1s linear'
                                                : 'none',
                                        }" @transitionend="onTransitionEnd">
											<el-table :data="extendedData" style="
                                                    width: 100%;
                                                    height: 100%;
                                                " ref="table" :show-header="false" :row-class-name="tableRowClassName
                                                    ">
												<el-table-column prop="wt" label="问题原因" width="180">
												</el-table-column>
												<el-table-column prop="gs" label="出现比例" width="180">
												</el-table-column>
												<el-table-column prop="jy" label="优化建议">
												</el-table-column>
											</el-table>
										</div>
									</div>
								</div>
							</com-box>
						</div>
					</div>
				</div>
			</div>
		</div>
	</bigScreenContainer>
</template>
<script>
	// import * as echarts from "echarts";
const comBox = {
    // template: `
    //     <div class="ConBoxClass_">
    //         <div class="title_">
    //             {{ titTxt }}
    //         </div>
    //         <div class="tab_" v-if="tabData.length>0">
    //         <div v-for="item in tabData" :style="{background: item.bgColor}" @click="selectTab(item)">
    //             <label>{{ item.bigTitle }}</label>
    //             <span v-if="item.smallTitle" :style="{color: item.lineColor}">{{ item.smallTitle }}</span>
    //             <hr v-if="item.select" :style="{background: item.lineColor}" />
    //         </div>
    //         </div>
    //         <div class="content_">
    //             <slot />
    //         </div>
    //     </div>
    // `,
    props: {
        titTxt: {
            type: String,
            default: "",
        },
        tabData: {
            type: Array,
            default: function () {
                return [];
            },
        },
    },
    data() {
        return {};
    },
    methods: {
        selectTab(item) {
            this.tabData.forEach((it) => {
                it.select = false;
                if (it.bigTitle == item.bigTitle) {
                    it.select = true;
                }
            });
            this.$emit("update:value", item.bigTitle);
            this.$emit("tabChange", item.bigTitle);
        },
    },
    render(h) {
        return h(
            "div",
            {
                class: "ConBoxClass_",
                style: {
                    width: "100%",
                    height: "100%",
                    display: "flex",
                    flexDirection: "column",
                },
            },
            [
                h(
                    "div",
                    {
                        class: "title_",
                        style: {
                            textAlign: "center",
                            fontSize: "22px",
                            color: "#0095ff",
                            paddingTop: "20px",
                            paddingBottom: "20px",
                            height: "60px",
                            boxSizing: "border-box",
                            flexShrink: "0",
                        },
                    },
                    this.titTxt
                ),
                this.tabData.length > 0
                    ? h(
                        "div",
                        {
                            class: "tab_",
                            style: {
                                height: "60px",
                                display: "flex",
                                flexDirection: "row",
                                justifyContent: "space-between",
                                flexShrink: "0",
                            },
                        },
                        this.tabData.map((item) =>
                            h(
                                "div",
                                {
                                    style: {
                                        background: item.bgColor,
                                        flex: 1,
                                        display: "flex",
                                        flexDirection: "column",
                                        justifyContent: "center",
                                        alignItems: "center",
                                        position: "relative",
                                    },
                                    on: { click: () => this.selectTab(item) },
                                },
                                [
                                    h(
                                        "label",
                                        {
                                            style: {
                                                fontSize: "16px",
                                                color: "#FFFFFF",
                                            },
                                        },
                                        item.bigTitle
                                    ),
                                    item.smallTitle
                                        ? h(
                                            "span",
                                            {
                                                style: {
                                                    color: item.lineColor,
                                                    fontSize: "16px",
                                                },
                                            },
                                            item.smallTitle
                                        )
                                        : null,
                                    item.select
                                        ? h("hr", {
                                            style: {
                                                background: item.lineColor,
                                                position: "absolute",
                                                width: "100%",
                                                height: "2px",
                                                border: "none",
                                                bottom: "0",
                                            },
                                        })
                                        : null,
                                ]
                            )
                        )
                    )
                    : null,
                h(
                    "div",
                    {
                        class: "content_",
                        style: {
                            flex: "auto",
                            flexShrink: "0",
                            background: "rgba(255, 255, 255, 0.05)",
                            overflow: "hidden",
                        },
                    },
                    this.$slots.default
                ),
            ]
        );
    },
};


export default {
    name: "development", // 研发
    components: { comBox },
    data() {
        return {
            dataMonth: [],
            componentContent,
            jyjd: {},
            extendedData1: [], // 扩展后的数据（首尾相连）
            extendedData: [], // 扩展后的数据（首尾相连）
            scrollPosition1: 0, // 当前滚动位置
            scrollPosition: 0, // 当前滚动位置
            rowHeight1: 50, // 单行高度（需根据实际表格调整）
            rowHeight: 50, // 单行高度（需根据实际表格调整）
            isSmooth: true, // 是否启用平滑滚动
            timer: null, // 定时器
            tableDataNull: [],
            tableData1: [
                {
                    date: "2016-05-02",
                    name: "王小",
                    address: "1518 弄",
                },
                {
                    date: "2016-05-02",
                    name: "王小虎",
                    address: "1518 弄",
                },
                {
                    date: "2016-05-04",
                    name: "王小虎",
                    address: "1518 弄",
                },
                {
                    date: "2016-05-01",
                    name: "王小虎",
                    address: "1518 弄",
                },
                {
                    date: "2016-05-02",
                    name: "王小虎",
                    address: "1518 弄",
                },
                {
                    date: "2016-05-04",
                    name: "王小虎",
                    address: "1518 弄",
                },
            ],
            tableData: [
                {
                    date: "2016-05-02",
                    name: "王小",
                    address: "1518 弄",
                },
                {
                    date: "2016-05-02",
                    name: "王小虎",
                    address: "1518 弄",
                },
                {
                    date: "2016-05-04",
                    name: "王小虎",
                    address: "1518 弄",
                },
                {
                    date: "2016-05-01",
                    name: "王小虎",
                    address: "1518 弄",
                },
                {
                    date: "2016-05-02",
                    name: "王小虎",
                    address: "1518 弄",
                },
                {
                    date: "2016-05-04",
                    name: "王小虎",
                    address: "1518 弄",
                },
            ],
            title1: [
                {
                    bigTitle: "检验及时率",
                    // smallTitle: '6811.69万元',
                    bgColor: "rgba(143,205,240,0.3)",
                    lineColor: "rgb(7, 125, 238)",
                    select: true,
                },
            ],
            title2: [
                {
                    bigTitle: "累计一次加工合格",
                    // smallTitle: '6811.69万元',
                    bgColor: "rgba(70,168,247,0.3)",
                    lineColor: "rgb(7, 125, 238)",
                    select: true,
                },
                {
                    bigTitle: "报废品率",
                    // smallTitle: '1736份',
                    bgColor: "rgba(230,207,92,0.3)",
                    lineColor: "rgb(7, 125, 238)",
                    select: false,
                },
                {
                    bigTitle: "产品合格率",
                    // smallTitle: '9763.61万元',
                    bgColor: "rgba(143,205,240,0.3)",
                    lineColor: "rgb(7, 125, 238)",
                    select: false,
                },
            ],
            title3: [
                {
                    bigTitle: "检验产品总数",
                    // smallTitle: '',
                    bgColor: "rgba(32,252,255,0.3)",
                    lineColor: "rgb(7, 125, 238)",
                    select: true,
                },
                {
                    bigTitle: "累计合格",
                    // smallTitle: '',
                    bgColor: "rgba(230,207,92,0.3)",
                    lineColor: "rgb(7, 125, 238)",
                    select: false,
                },
                {
                    bigTitle: "累计不合格",
                    // smallTitle: '',
                    bgColor: "rgba(70,168,247,0.3)",
                    lineColor: "rgb(7, 125, 238)",
                    select: false,
                },
            ],
            title4: [
                {
                    bigTitle: "工序合格率",
                    // smallTitle: '352184.47件',
                    bgColor: "rgba(143,205,240,0.3)",
                    lineColor: "rgb(7, 125, 238)",
                    select: true,
                },
            ],
            title6: [
                {
                    bigTitle: "问题类型分布",
                    // smallTitle: '',
                    bgColor: "rgba(70,168,247,0.25)",
                    lineColor: "rgb(7, 125, 238)",
                    select: true,
                },
                {
                    bigTitle: "责任分布",
                    // smallTitle: '352184.47件',
                    bgColor: "rgba(143,205,240,0.3)",
                    lineColor: "rgb(7, 125, 238)",
                    select: false,
                },
            ],
            area2: "累计一次加工合格",
            area3: "检验产品总数",
            area6: "问题类型分布",

            option11_data_lastYear: [],
            option11_data_currentYear: [],

            option21_data_lastYear: [],
            option21_data_currentYear: [],

            option22_data_lastYear: [],
            option22_data_currentYear: [],

            option23_data_lastYear: [],
            option23_data_currentYear: [],

            option31_data_lastYear: [],
            option31_data_currentYear: [],

            option32_data_lastYear: [],
            option32_data_currentYear: [],

            option33_data_lastYear: [],
            option33_data_currentYear: [],

            option41_dataX: [],
            option41_dataY: [],
            option612_dataX: [],
            option612_dataY: [],

            currentYear: "",
            lastYear: "",
            dataJianYanJinDu: [],
            dataGXHGL: [],
            dataWTLXFB: [],
            dataJJCS: [],
            dataZRFB: [],
            dataCLFS: [],
            option622_dataX: ["供应商", "外协", "生产", "其他"],
            option622_dataY: ["返工返修", "让步接收", "退货", "报废", "料废", "工废", "其他"],
            option622_dataY_FGWX: [],
            option622_dataY_RBJS: [],
            option622_dataY_TH: [],
            option622_dataY_BF: [],
            option622_dataY_LF: [],
            option622_dataY_GF: [],
            option622_dataY_QT: [],
        };
    },
    computed: {
        option11() {
            return {
                grid: {
                    top: "20%",
                    bottom: "15%",
                    left: "10%",
                    right: "3%",
                },
                xAxis: {
                    type: "category",
                    axisLine: {
                        lineStyle: {
                            color: "#DDDDDD",
                            width: 2,
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        color: "#DDDDDD",
                    },
                    data: [
                        "01",
                        "02",
                        "03",
                        "04",
                        "05",
                        "06",
                        "07",
                        "08",
                        "09",
                        "10",
                        "11",
                        "12",
                    ],
                },
                yAxis: {
                    type: "value",
                    name: "单位：%",
                    nameTextStyle: {
                        color: "#DDDDDD",
                        padding: [0, 30, 4, 0],
                    },
                    axisLine: {
                        show: false,
                    },
                    axisLabel: {
                        color: "#DDDDDD",
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: "dashed",
                            color: "#E6E6E6",
                        },
                    },
                },
                legend: {
                    right: "20",
                    top: "10",
                    textStyle: { color: "#DDDDDD" },
                    itemWidth: 8,
                    itemHeight: 8,
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow",
                    },
                },
                color: ["#00CFFF", "#006FFF"],
                series: [
                    {
                        type: "bar",
                        name: this.lastYear,
                        barWidth: 12,
                        itemStyle: {
                            barBorderRadius: [6, 6, 0, 0],
                        },
                        data: this.option11_data_lastYear,
                    },
                    {
                        type: "bar",
                        name: this.currentYear,
                        barWidth: 12,
                        itemStyle: {
                            barBorderRadius: [6, 6, 0, 0],
                        },
                        data: this.option21_data_currentYear,
                    },
                ],
            };
        },
        option21() {
            return {
                grid: {
                    top: "20%",
                    bottom: "15%",
                    left: "10%",
                    right: "3%",
                },
                yAxis: {
                    type: "value",
                    name: "单位：件",
                    nameTextStyle: {
                        color: "#DDDDDD",
                        padding: [0, 30, 4, 0],
                    },
                    axisLine: {
                        show: false,
                    },
                    axisLabel: {
                        color: "#DDDDDD",
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: "dashed",
                            color: "#E6E6E6",
                        },
                    },
                },
                xAxis: {
                    type: "category",
                    axisLine: {
                        lineStyle: {
                            color: "#DDDDDD",
                            width: 2,
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        color: "#DDDDDD",
                    },
                    data: [
                        "01",
                        "02",
                        "03",
                        "04",
                        "05",
                        "06",
                        "07",
                        "08",
                        "09",
                        "10",
                        "11",
                        "12",
                    ],
                },
                legend: {
                    right: "20",
                    top: "10",
                    textStyle: { color: "#DDDDDD" },
                    itemWidth: 8,
                    itemHeight: 8,
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow",
                    },
                },
                color: ["#F4A460", "#00BFBF"],
                series: [
                    {
                        name: this.lastYear,
                        type: "line",
                        symbol: "circle",
                        symbolSize: 8,
                        lineStyle: {
                            width: 4
                        },
                        // smooth: true,
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(
                                0,
                                0,
                                0,
                                1,
                                [
                                    { offset: 0, color: "rgba(244,164,96,0.3)" }, // 渐变色的起始颜色
                                    { offset: 1, color: "transparent" }, // 渐变色的结束颜色
                                ]
                            ),
                        },
                        data: this.option21_data_lastYear,
                    },
                    {
                        name: this.currentYear,
                        type: "line",
                        symbol: "circle",
                        symbolSize: 8,
                        lineStyle: {
                            width: 4
                        },
                        // smooth: true,
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(
                                0,
                                0,
                                0,
                                1,
                                [
                                    { offset: 0, color: "rgba(0,191,191,0.3)" }, // 渐变色的起始颜色
                                    { offset: 1, color: "transparent" }, // 渐变色的结束颜色
                                ]
                            ),
                        },
                        data: this.option21_data_currentYear,
                    },
                ],
            };
        },
        option22() {
            return {
                grid: {
                    top: "20%",
                    bottom: "15%",
                    left: "10%",
                    right: "3%",
                },
                yAxis: {
                    type: "value",
                    name: "单位：%",
                    nameTextStyle: {
                        color: "#DDDDDD",
                        padding: [0, 30, 4, 0],
                    },
                    axisLine: {
                        show: false,
                    },
                    axisLabel: {
                        color: "#DDDDDD",
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: "dashed",
                            color: "#E6E6E6",
                        },
                    },
                },
                xAxis: {
                    type: "category",
                    axisLine: {
                        lineStyle: {
                            color: "#DDDDDD",
                            width: 2,
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        color: "#DDDDDD",
                    },
                    data: [
                        "01",
                        "02",
                        "03",
                        "04",
                        "05",
                        "06",
                        "07",
                        "08",
                        "09",
                        "10",
                        "11",
                        "12",
                    ],
                },
                legend: {
                    right: "20",
                    top: "10",
                    textStyle: { color: "#DDDDDD" },
                    itemWidth: 8,
                    itemHeight: 8,
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow",
                    },
                },
                color: ["#F4A460", "#00BFBF"],
                series: [
                    {
                        name: this.lastYear,
                        type: "line",
                        symbol: "circle",
                        symbolSize: 8,
                        lineStyle: {
                            width: 4
                        },
                        // smooth: true,
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(
                                0,
                                0,
                                0,
                                1,
                                [
                                    { offset: 0, color: "rgba(244,164,96,0.3)" }, // 渐变色的起始颜色
                                    { offset: 1, color: "transparent" }, // 渐变色的结束颜色
                                ]
                            ),
                        },
                        data: this.option22_data_lastYear,
                    },
                    {
                        name: this.currentYear,
                        type: "line",
                        symbol: "circle",
                        symbolSize: 8,
                        lineStyle: {
                            width: 4
                        },
                        // smooth: true,
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(
                                0,
                                0,
                                0,
                                1,
                                [
                                    { offset: 0, color: "rgba(0,191,191,0.3)" }, // 渐变色的起始颜色
                                    { offset: 1, color: "transparent" }, // 渐变色的结束颜色
                                ]
                            ),
                        },
                        data: this.option22_data_currentYear,
                    },
                ],
            };
        },
        option23() {
            return {
                grid: {
                    top: "20%",
                    bottom: "15%",
                    left: "10%",
                    right: "3%",
                },
                yAxis: {
                    type: "value",
                    name: "单位：%",
                    nameTextStyle: {
                        color: "#DDDDDD",
                        padding: [0, 30, 4, 0],
                    },
                    axisLine: {
                        show: false,
                    },
                    axisLabel: {
                        color: "#DDDDDD",
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: "dashed",
                            color: "#E6E6E6",
                        },
                    },
                },
                xAxis: {
                    type: "category",
                    axisLine: {
                        lineStyle: {
                            color: "#DDDDDD",
                            width: 2,
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        color: "#DDDDDD",
                    },
                    data: [
                        "01",
                        "02",
                        "03",
                        "04",
                        "05",
                        "06",
                        "07",
                        "08",
                        "09",
                        "10",
                        "11",
                        "12",
                    ],
                },
                legend: {
                    right: "20",
                    top: "10",
                    textStyle: { color: "#DDDDDD" },
                    itemWidth: 8,
                    itemHeight: 8,
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow",
                    },
                },
                color: ["#F4A460", "#00BFBF"],
                series: [
                    {
                        name: this.lastYear,
                        type: "line",
                        symbol: "circle",
                        symbolSize: 8,
                        lineStyle: {
                            width: 4
                        },
                        // smooth: true,
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(
                                0,
                                0,
                                0,
                                1,
                                [
                                    { offset: 0, color: "rgba(244,164,96,0.3)" }, // 渐变色的起始颜色
                                    { offset: 1, color: "transparent" }, // 渐变色的结束颜色
                                ]
                            ),
                        },
                        data: this.option23_data_lastYear,
                    },
                    {
                        name: this.currentYear,
                        type: "line",
                        symbol: "circle",
                        symbolSize: 8,
                        lineStyle: {
                            width: 4
                        },
                        // smooth: true,
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(
                                0,
                                0,
                                0,
                                1,
                                [
                                    { offset: 0, color: "rgba(0,191,191,0.3)" }, // 渐变色的起始颜色
                                    { offset: 1, color: "transparent" }, // 渐变色的结束颜色
                                ]
                            ),
                        },
                        data: this.option23_data_currentYear,
                    },
                ],
            };
        },
        option31() {
            return {
                grid: {
                    top: "20%",
                    bottom: "15%",
                    left: "10%",
                    right: "3%",
                },
                xAxis: {
                    type: "category",
                    axisLine: {
                        lineStyle: {
                            color: "#DDDDDD",
                            width: 2,
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        color: "#DDDDDD",
                    },
                    data: [
                        "01",
                        "02",
                        "03",
                        "04",
                        "05",
                        "06",
                        "07",
                        "08",
                        "09",
                        "10",
                        "11",
                        "12",
                    ],
                },
                yAxis: {
                    type: "value",
                    name: "单位：件",
                    nameTextStyle: {
                        color: "#DDDDDD",
                        padding: [0, 30, 4, 0],
                    },
                    axisLine: {
                        show: false,
                    },
                    axisLabel: {
                        color: "#DDDDDD",
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: "dashed",
                            color: "#E6E6E6",
                        },
                    },
                },
                legend: {
                    right: "20",
                    top: "10",
                    textStyle: { color: "#DDDDDD" },
                    itemWidth: 8,
                    itemHeight: 8,
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow",
                    },
                },
                color: ["#F4A460", "#00BFBF"],
                series: [
                    {
                        type: "bar",
                        name: this.lastYear,
                        barWidth: 12,
                        itemStyle: {
                            barBorderRadius: [6, 6, 0, 0],
                        },
                        data: this.option31_data_lastYear,
                    },
                    {
                        type: "bar",
                        name: this.currentYear,
                        barWidth: 12,
                        itemStyle: {
                            barBorderRadius: [6, 6, 0, 0],
                        },
                        data: this.option31_data_currentYear,
                    },
                ],
            };
        },
        option32() {
            return {
                grid: {
                    top: "20%",
                    bottom: "15%",
                    left: "10%",
                    right: "3%",
                },
                xAxis: {
                    type: "category",
                    axisLine: {
                        lineStyle: {
                            color: "#DDDDDD",
                            width: 2,
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        color: "#DDDDDD",
                    },
                    data: [
                        "01",
                        "02",
                        "03",
                        "04",
                        "05",
                        "06",
                        "07",
                        "08",
                        "09",
                        "10",
                        "11",
                        "12",
                    ],
                },
                yAxis: {
                    type: "value",
                    name: "单位：件",
                    nameTextStyle: {
                        color: "#DDDDDD",
                        padding: [0, 30, 4, 0],
                    },
                    axisLine: {
                        show: false,
                    },
                    axisLabel: {
                        color: "#DDDDDD",
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: "dashed",
                            color: "#E6E6E6",
                        },
                    },
                },
                legend: {
                    right: "20",
                    top: "10",
                    textStyle: { color: "#DDDDDD" },
                    itemWidth: 8,
                    itemHeight: 8,
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow",
                    },
                },
                color: ["#5A78B8", "#FF8888"],
                series: [
                    {
                        type: "bar",
                        name: this.lastYear,
                        barWidth: 12,
                        itemStyle: {
                            barBorderRadius: [6, 6, 0, 0],
                        },
                        data: this.option32_data_lastYear,
                    },
                    {
                        type: "bar",
                        name: this.currentYear,
                        barWidth: 12,
                        itemStyle: {
                            barBorderRadius: [6, 6, 0, 0],
                        },
                        data: this.option32_data_currentYear,
                    },
                ],
            };
        },
        option33() {
            return {
                grid: {
                    top: "20%",
                    bottom: "15%",
                    left: "10%",
                    right: "3%",
                },
                xAxis: {
                    type: "category",
                    axisLine: {
                        lineStyle: {
                            color: "#DDDDDD",
                            width: 2,
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        color: "#DDDDDD",
                    },
                    data: [
                        "01",
                        "02",
                        "03",
                        "04",
                        "05",
                        "06",
                        "07",
                        "08",
                        "09",
                        "10",
                        "11",
                        "12",
                    ],
                },
                yAxis: {
                    type: "value",
                    name: "单位：件",
                    nameTextStyle: {
                        color: "#DDDDDD",
                        padding: [0, 30, 4, 0],
                    },
                    axisLine: {
                        show: false,
                    },
                    axisLabel: {
                        color: "#DDDDDD",
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: "dashed",
                            color: "#E6E6E6",
                        },
                    },
                },
                legend: {
                    right: "20",
                    top: "10",
                    textStyle: { color: "#DDDDDD" },
                    itemWidth: 8,
                    itemHeight: 8,
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow",
                    },
                },
                color: ["#43A8F4", "rgb(49,234,180)"],
                series: [
                    {
                        type: "bar",
                        name: this.lastYear,
                        barWidth: 12,
                        itemStyle: {
                            barBorderRadius: [6, 6, 0, 0],
                        },
                        data: this.option33_data_lastYear,
                    },
                    {
                        type: "bar",
                        name: this.currentYear,
                        barWidth: 12,
                        itemStyle: {
                            barBorderRadius: [6, 6, 0, 0],
                        },
                        data: this.option33_data_currentYear,
                    },
                ],
            };
        },
        option41() {
            return {
                grid: {
                    top: "20%",
                    bottom: "15%",
                    left: "10%",
                    right: "3%",
                },
                xAxis: {
                    type: "category",
                    axisLine: {
                        lineStyle: {
                            color: "#DDDDDD",
                            width: 2,
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        color: "#DDDDDD",
                    },
                    data: this.option41_dataX,
                },
                yAxis: {
                    type: "value",
                    name: "单位：%",
                    nameTextStyle: {
                        color: "#DDDDDD",
                        padding: [0, 30, 4, 0],
                    },
                    axisLine: {
                        show: false,
                    },
                    axisLabel: {
                        color: "#DDDDDD",
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: "dashed",
                            color: "#E6E6E6",
                        },
                    },
                },
                legend: {
                    right: "20",
                    top: "10",
                    textStyle: { color: "#DDDDDD" },
                    itemWidth: 8,
                    itemHeight: 8,
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow",
                    },
                },
                color: ["#43A8F4"],
                series: [
                    {
                        type: "bar",
                        name: "",
                        barWidth: 20,
                        itemStyle: {
                            barBorderRadius: [10, 10, 0, 0],
                        },
                        data: this.option41_dataY,
                    },
                ],
            };
        },
        option611() {
            return {
                tooltip: {
                    trigger: "item",
                },
                grid: {
                    top: "1%",
                    bottom: "15%",
                    left: "1%",
                    right: "1%",
                },
                legend: {
                    bottom: "5%",
                    left: "center",
                    itemWidth: 8,
                    itemHeight: 3,
                    itemGap: 15,
                    textStyle: {
                        color: "#EEEEEE",
                        fontWeight: 600,
                        fontSize: 12,
                    },
                    // formatter: (name) => {
                    //   let data = this.option611.series[0].data;
                    //   let tarValue;
                    //   for (let i = 0; i < data.length; i++) {
                    //     if (data[i].name == name) {
                    //       tarValue = data[i].value;
                    //     }
                    //   }
                    //   return `${name}\n${tarValue}万元`;
                    // },
                },
                title: {
                    show: true,
                    text: "",
                    left: "center",
                    top: "32%",
                    textStyle: {
                        color: "#EEEEEE",
                        fontSize: 12,
                        fontWeight: 400,
                    },
                },
                // color: ["#1A79FF", "#97D6BF"],
                series: [
                    {
                        name: "",
                        type: "pie",
                        center: ["50%", "40%"],
                        radius: ["35%", "65%"],
                        avoidLabelOverlap: false,
                        label: {
                            position: "inside",
                            formatter: "{d}%",
                            textStyle: {
                                color: "#EEEEEE",
                                fontSize: 14,
                                fontWeight: 600,
                            },
                        },
                        labelLine: {
                            show: false,
                        },
                        data: this.dataWTLXFB,
                    },
                ],
            };
        },
        option612() {
            return {
                grid: {
                    top: "10%",
                    bottom: "15%",
                    left: "15%",
                    right: "3%",
                },
                xAxis: {
                    type: "category",
                    axisLine: {
                        lineStyle: {
                            color: "#DDDDDD",
                            width: 2,
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        color: "#DDDDDD",
                    },
                    data: this.option612_dataX,
                },
                yAxis: {
                    type: "value",
                    nameTextStyle: { color: "#DDDDDD" },
                    axisLine: {
                        show: false,
                    },
                    axisLabel: {
                        color: "#DDDDDD",
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: "dashed",
                            color: "#E6E6E6",
                        },
                    },
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow",
                    },
                },
                color: ["#43A8F4"],
                series: [
                    {
                        type: "bar",
                        name: "",
                        barWidth: 16,
                        itemStyle: {
                            borderRadius: 8,
                        },
                        label: {
                            show: true,
                            position: "top",
                            textStyle: {
                                fontSize: 16,
                                fontWeight: "blod",
                                color: "#DDDDDD",
                            },
                        },
                        data: this.option612_dataY,
                    },
                ],
            };
        },
        option621() {
            return {
                tooltip: {
                    trigger: "item",
                },
                grid: {
                    top: "1%",
                    bottom: "15%",
                    left: "1%",
                    right: "1%",
                },
                legend: {
                    bottom: "5%",
                    left: "center",
                    itemWidth: 8,
                    itemHeight: 3,
                    itemGap: 15,
                    textStyle: {
                        color: "#EEEEEE",
                        fontWeight: 600,
                        fontSize: 12,
                    },
                    // formatter: (name) => {
                    //   let data = this.option621.series[0].data;
                    //   let tarValue;
                    //   for (let i = 0; i < data.length; i++) {
                    //     if (data[i].name == name) {
                    //       tarValue = data[i].value;
                    //     }
                    //   }
                    //   return `${name}\n${tarValue}万元`;
                    // },
                },
                title: {
                    show: true,
                    text: "",
                    left: "center",
                    top: "32%",
                    textStyle: {
                        color: "#EEEEEE",
                        fontSize: 12,
                        fontWeight: 400,
                    },
                },
                // color: ["#1A79FF", "#97D6BF"],
                series: [
                    {
                        name: "",
                        type: "pie",
                        center: ["50%", "40%"],
                        radius: ["35%", "65%"],
                        avoidLabelOverlap: false,
                        label: {
                            position: "inside",
                            formatter: "{d}%",
                            textStyle: {
                                color: "#EEEEEE",
                                fontSize: 14,
                                fontWeight: 600,
                            },
                        },
                        labelLine: {
                            show: false,
                        },
                        data: this.dataZRFB,
                    },
                ],
            };
        },
        option622() {
            return {
                grid: {
                    top: "10%",
                    bottom: "15%",
                    left: "15%",
                    right: "30%",
                },
                legend: {
                    right: "15",
                    top: "center",
                    orient: "vertical",
                    itemWidth: 8,
                    itemHeight: 8,
                    textStyle: {
                        color: "#DDDDDD",
                        fontWeight: 400,
                        fontSize: 14,
                    },
                },
                xAxis: {
                    type: "category",
                    axisLine: {
                        lineStyle: {
                            color: "#DDDDDD",
                            width: 2,
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        color: "#DDDDDD",
                    },
                    data: this.option622_dataX,
                    // ['返工返修', '让步接收', '退货', '报废', '料废', '工废', '其他']
                },
                yAxis: {
                    type: "value",
                    nameTextStyle: { color: "#DDDDDD" },
                    axisLine: {
                        show: false,
                    },
                    axisLabel: {
                        color: "#DDDDDD",
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: "dashed",
                            color: "#E6E6E6",
                        },
                    },
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow",
                    },
                },
                series: [
                    {
                        name: this.option622_dataY[0],
                        type: "bar",
                        barWidth: 16,
                        stack: "total",
                        // label: {
                        //   show: true
                        // },
                        emphasis: {
                            focus: "series",
                        },
                        data: this.dataCLFS[this.option622_dataY[0]],
                    },
                    {
                        name: this.option622_dataY[1],
                        type: "bar",
                        barWidth: 16,
                        stack: "total",
                        emphasis: {
                            focus: "series",
                        },
                        data: this.dataCLFS[this.option622_dataY[1]],
                    },
                    {
                        name: this.option622_dataY[2],
                        type: "bar",
                        barWidth: 16,
                        stack: "total",
                        emphasis: {
                            focus: "series",
                        },
                        data: this.dataCLFS[this.option622_dataY[2]],
                    },
                    {
                        name: this.option622_dataY[3],
                        type: "bar",
                        barWidth: 16,
                        stack: "total",
                        emphasis: {
                            focus: "series",
                        },
                        data: this.dataCLFS[this.option622_dataY[3]],
                    },
                    {
                        name: this.option622_dataY[4],
                        type: "bar",
                        barWidth: 16,
                        stack: "total",
                        emphasis: {
                            focus: "series",
                        },
                        data: this.dataCLFS[this.option622_dataY[4]],
                    },
                    {
                        name: this.option622_dataY[5],
                        type: "bar",
                        barWidth: 16,
                        stack: "total",
                        emphasis: {
                            focus: "series",
                        },
                        data: this.dataCLFS[this.option622_dataY[5]],
                    },
                    {
                        name: this.option622_dataY[6],
                        type: "bar",
                        barWidth: 16,
                        stack: "total",
                        emphasis: {
                            focus: "series",
                        },
                        data: this.dataCLFS[this.option622_dataY[6]],
                    },
                ],
            };
        },
    },
    created() {
        const currentDate = new Date();
        const currentYear = currentDate.getFullYear();
        currentDate.setFullYear(currentYear - 1);
        const lastYear = currentDate.getFullYear();
        this.currentYear = currentYear;
        this.lastYear = lastYear;
    },
    async mounted() {
        await this.getData();
        this.initializeData1(); // 初始化数据
        this.startScroll1(); // 开始滚动
        this.initializeData(); // 初始化数据
        this.startScroll(); // 开始滚动
        this.$nextTick(() => {
            // 动态 DOM 更新后重新获取高度
            const heights1 = this.getRowHeights1();
            this.rowHeight1 = heights1[0];
            const heights = this.getRowHeights();
            this.rowHeight = heights[0];

            echarts.init(this.$refs.jianyanjishilvDom).setOption(this.option11);
            echarts
                .init(this.$refs.leijiyicijiagonghegeDom)
                .setOption(this.option21);
            echarts
                .init(this.$refs.jianyanchanpinzongshuDom)
                .setOption(this.option31);
            echarts.init(this.$refs.gongxuhegelvDom).setOption(this.option41);
            echarts
                .init(this.$refs.wentileixingfenbuzhanbiDom)
                .setOption(this.option611);
            echarts.init(this.$refs.jiejuecuoshiDom).setOption(this.option612);
        });
    },
    beforeDestroy() {
        this.stopScroll1(); // 清除定时器
        this.stopScroll(); // 清除定时器
    },
    methods: {
        getRowHeights1() {
            // 获取表格的 DOM 元素
            const tableElement = this.$refs.table1.$el;
            console.log(tableElement);
            // 获取所有行
            const rows = tableElement.querySelectorAll(
                ".table_ .el-table__row"
            );
            // 遍历每一行并获取高度
            const heights = Array.from(rows).map((row) => row.offsetHeight);
            console.log("每行高度：", heights);
            return heights;
        },
        // 初始化扩展数据
        initializeData1() {
            // 扩展数据：将原始数据复制一份追加到末尾
            this.extendedData1 = [...this.tableData1, ...this.tableData1];
        },
        // 开始滚动
        startScroll1() {
            this.timer = setInterval(() => {
                this.scrollPosition1 += this.rowHeight1; // 向下滚动一行
                this.isSmooth = true; // 平滑过渡
                // 如果滚动到最后一行（原始数据长度），等待过渡完成后跳回顶部
                if (
                    this.scrollPosition1 >=
                    this.rowHeight1 * this.tableData1.length
                ) {
                    setTimeout(() => {
                        this.isSmooth = false; // 关闭过渡
                        this.scrollPosition1 = 0; // 瞬间跳回顶部
                    }, 1900);
                }
            }, 2000); // 每2秒滚动一次
        },
        // 停止滚动
        stopScroll1() {
            clearInterval(this.timer);
        },
        // 监听过渡结束事件（备用）
        onTransitionEnd1() {
            if (
                this.scrollPosition1 >=
                this.rowHeight1 * this.tableData1.length
            ) {
                this.isSmooth = false;
                this.scrollPosition1 = 0;
            }
        },
        tableRowClassName1({ row, rowIndex }) {
            if (rowIndex % 4 == 1) {
                return "warning-row";
            } else if (rowIndex % 4 == 3) {
                return "success-row";
            }
            return "odd-row";
        },
        getRowHeights() {
            // 获取表格的 DOM 元素
            const tableElement = this.$refs.table.$el;
            console.log(tableElement);
            // 获取所有行
            const rows = tableElement.querySelectorAll(
                ".table_2 .el-table__row"
            );
            // 遍历每一行并获取高度
            const heights = Array.from(rows).map((row) => row.offsetHeight);
            console.log("每行高度：", heights);
            return heights;
        },
        // 初始化扩展数据
        initializeData() {
            // 扩展数据：将原始数据复制一份追加到末尾
            this.extendedData = [...this.tableData, ...this.tableData];
        },
        // 开始滚动
        startScroll() {
            this.timer = setInterval(() => {
                this.scrollPosition += this.rowHeight; // 向下滚动一行
                this.isSmooth = true; // 平滑过渡
                // 如果滚动到最后一行（原始数据长度），等待过渡完成后跳回顶部
                if (
                    this.scrollPosition >=
                    this.rowHeight * this.tableData.length
                ) {
                    setTimeout(() => {
                        this.isSmooth = false; // 关闭过渡
                        this.scrollPosition = 0; // 瞬间跳回顶部
                    }, 1900);
                }
            }, 2000); // 每2秒滚动一次
        },
        // 停止滚动
        stopScroll() {
            clearInterval(this.timer);
        },
        // 监听过渡结束事件（备用）
        onTransitionEnd() {
            if (this.scrollPosition >= this.rowHeight * this.tableData.length) {
                this.isSmooth = false;
                this.scrollPosition = 0;
            }
        },
        tableRowClassName({ row, rowIndex }) {
            if (rowIndex % 4 == 1) {
                return "warning-row";
            } else if (rowIndex % 4 == 3) {
                return "success-row";
            }
            return "odd-row";
        },
        async getData() {
            await this.WitGlobal.requestCode(
                "SJKB.ZL.db.manage.selectBoardZlY",
                {}
            ).then((res) => {
                if (res.code == 200) {
                    this.dataMonth = res.data;
                    // this.dataMonth = [{
                    //   "ljbhg": "2",
                    //   "month": "2",
                    //   "year": "2024",
                    //   "cphgl": "2",
                    //   "jyjsl": "2",
                    //   "f_id": "634794759310835525",
                    //   "ljycjghgl": "3",
                    //   "jycpzs": "2",
                    //   "bfpl": "5",
                    //   "ljhg": "4"
                    // }]
                    let monthList = [
                        "01",
                        "02",
                        "03",
                        "04",
                        "05",
                        "06",
                        "07",
                        "08",
                        "09",
                        "10",
                        "11",
                        "12",
                    ];
                    monthList.forEach((month) => {
                        let filetrList = this.dataMonth.filter(
                            (i) => Number(month) == Number(i.month)
                        );
                        let filterCurrentYear = filetrList.filter(
                            (i) => i.year == this.currentYear
                        );
                        if (filterCurrentYear.length > 0) {
                            if (filterCurrentYear[0].jyjsl)
                                this.option11_data_currentYear.push(
                                    filterCurrentYear[0].jyjsl
                                );
                            else this.option11_data_currentYear.push(0);
                            if (filterCurrentYear[0].ljycjghgl)
                                this.option21_data_currentYear.push(
                                    filterCurrentYear[0].ljycjghgl
                                );
                            else this.option21_data_currentYear.push(0);
                            if (filterCurrentYear[0].bfpl)
                                this.option22_data_currentYear.push(
                                    filterCurrentYear[0].bfpl
                                );
                            else this.option22_data_currentYear.push(0);
                            if (filterCurrentYear[0].cphgl)
                                this.option23_data_currentYear.push(
                                    filterCurrentYear[0].cphgl
                                );
                            else this.option23_data_currentYear.push(0);
                            if (filterCurrentYear[0].jycpzs)
                                this.option31_data_currentYear.push(
                                    filterCurrentYear[0].jycpzs
                                );
                            else this.option31_data_currentYear.push(0);
                            if (filterCurrentYear[0].ljhg)
                                this.option32_data_currentYear.push(
                                    filterCurrentYear[0].ljhg
                                );
                            else this.option32_data_currentYear.push(0);
                            if (filterCurrentYear[0].ljbhg)
                                this.option33_data_currentYear.push(
                                    filterCurrentYear[0].ljbhg
                                );
                            else this.option33_data_currentYear.push(0);
                        } else {
                            this.option11_data_currentYear.push(0);
                            this.option21_data_currentYear.push(0);
                            this.option22_data_currentYear.push(0);
                            this.option23_data_currentYear.push(0);
                            this.option31_data_currentYear.push(0);
                            this.option32_data_currentYear.push(0);
                            this.option33_data_currentYear.push(0);
                        }
                        let filterLastYear = filetrList.filter(
                            (i) => i.year == this.lastYear
                        );
                        if (filterLastYear.length > 0) {
                            if (filterLastYear[0].jyjsl)
                                this.option11_data_lastYear.push(
                                    filterLastYear[0].jyjsl
                                );
                            else this.option11_data_lastYear.push(0);
                            if (filterLastYear[0].ljycjghgl)
                                this.option21_data_lastYear.push(
                                    filterLastYear[0].ljycjghgl
                                );
                            else this.option21_data_lastYear.push(0);
                            if (filterLastYear[0].bfpl)
                                this.option22_data_lastYear.push(
                                    filterLastYear[0].bfpl
                                );
                            else this.option22_data_lastYear.push(0);
                            if (filterLastYear[0].cphgl)
                                this.option23_data_lastYear.push(
                                    filterLastYear[0].cphgl
                                );
                            else this.option23_data_lastYear.push(0);
                            if (filterLastYear[0].jycpzs)
                                this.option31_data_lastYear.push(
                                    filterLastYear[0].jycpzs
                                );
                            else this.option31_data_lastYear.push(0);
                            if (filterLastYear[0].ljhg)
                                this.option32_data_lastYear.push(
                                    filterLastYear[0].ljhg
                                );
                            else this.option32_data_lastYear.push(0);
                            if (filterLastYear[0].ljbhg)
                                this.option33_data_lastYear.push(
                                    filterLastYear[0].ljbhg
                                );
                            else this.option33_data_lastYear.push(0);
                        } else {
                            this.option11_data_lastYear.push(0);
                            this.option21_data_lastYear.push(0);
                            this.option22_data_lastYear.push(0);
                            this.option23_data_lastYear.push(0);
                            this.option31_data_lastYear.push(0);
                            this.option32_data_lastYear.push(0);
                            this.option33_data_lastYear.push(0);
                        }
                    });
                }
            });
            await this.WitGlobal.requestCode('SJKB.ZL.db.manage.selectBoardZlKsqk', {}).then(res => {
                if (res.code == 200) {
                    this.tableData1 = res.data;
                }
            });
            await this.WitGlobal.requestCode('SJKB.ZL.db.manage.selectBoardZlJywtyyfx', {}).then(res => {
                if (res.code == 200) {
                    this.tableData = res.data;
                }
            });
            await this.WitGlobal.requestCode(
                "SJKB.ZL.db.manage.selectBoardZlGxhgl",
                {}
            ).then((res) => {
                if (res.code == 200) {
                    this.dataGXHGL = res.data;
                    this.dataGXHGL.forEach((item) => {
                        if (item.gx && item.hgl) {
                            this.option41_dataX.unshift(item.gx);
                            this.option41_dataY.unshift(item.hgl);
                        }
                    });
                }
            });
            await this.WitGlobal.requestCode(
                "SJKB.ZL.db.manage.selectBoardZlWtlxfb",
                {}
            ).then((res) => {
                if (res.code == 200) {
                    this.dataWTLXFB = res.data.map(item => {
                        if (item.wtlx && item.sum) {
                            return { value: item.sum, name: item.wtlx }
                        };
                    })
                }
            });
            await this.WitGlobal.requestCode(
                "SJKB.ZL.db.manage.selectBoardZlWtlxfbJjcs",
                {}
            ).then((res) => {
                if (res.code == 200) {
                    this.dataJJCS = res.data;
                    this.dataJJCS.forEach((item) => {
                        if (item.jjcs && item.sum) {
                            this.option612_dataX.unshift(item.jjcs);
                            this.option612_dataY.unshift(item.sum);
                        }
                    });
                }
            });
            await this.WitGlobal.requestCode(
                "SJKB.ZL.db.manage.selectBoardZlZrfb",
                {}
            ).then((res) => {
                if (res.code == 200) {
                    this.dataZRFB = res.data.map(item => {
                        if (item.zr && item.sum) {
                            return { value: item.sum, name: item.zr }
                        };
                    })
                }
            });
            await this.WitGlobal.requestCode(
                "SJKB.ZL.db.manage.selectBoardZlZrfbZzt",
                {}
            ).then((res) => {
                if (res.code == 200) {
                    const clfsList = this.option622_dataY;
                    const zrOrder = this.option622_dataX;
                    // 初始化结果对象
                    const result = clfsList.reduce((acc, clfs) => {
                        acc[clfs] = Array(zrOrder.length).fill(0);
                        return acc;
                    }, {});

                    // 遍历数据，将对应的 sum 写入正确的 clfs 和 zr 索引位置
                    res.data.forEach((item) => {
                        const clfsIndex = clfsList.indexOf(item.clfs); // 找到 clfs 的索引
                        const zrIndex = zrOrder.indexOf(item.zr); // 找到 zr 的索引
                        if (clfsIndex !== -1 && zrIndex !== -1) {
                            result[item.clfs][zrIndex] = item.sum; // 写入对应位置
                        }
                    });
                    this.dataCLFS = result;
                    console.log(this.dataCLFS);

                }
            });
            await this.WitGlobal.requestCode('SJKB.ZL.db.manage.selectBoardZlJyjd', {}).then(res => {
                if (res.code == 200) {
                    // this.dataJianYanJinDu = [{ "zxzrws": "23", "cqrws": "33", "jylx": "生产检验任务", "dpfrws": "43", "f_id": "635781913281331077", "ywcrws": "34" }, { "zxzrws": "34", "cqrws": "32", "jylx": "来料检验任务", "dpfrws": "42", "f_id": "635781961733930887", "ywcrws": "23" }]
                    this.dataJianYanJinDu = res.data
                    this.dataJianYanJinDu.forEach(item => {
                        if (item.jylx == "生产检验任务") {
                            this.jyjd.sczxzrws = item.zxzrws
                            this.jyjd.sccqrws = item.cqrws
                            this.jyjd.scdpfrws = item.dpfrws
                            this.jyjd.scywcrws = item.ywcrws
                            this.jyjd.sczs = Number(item.zxzrws) + Number(item.cqrws) + Number(item.dpfrws) + Number(item.ywcrws)
                        }
                        if (item.jylx == "来料检验任务") {
                            this.jyjd.llzxzrws = item.zxzrws
                            this.jyjd.llcqrws = item.cqrws
                            this.jyjd.lldpfrws = item.dpfrws
                            this.jyjd.llywcrws = item.ywcrws
                            this.jyjd.llzs = Number(item.zxzrws) + Number(item.cqrws) + Number(item.dpfrws) + Number(item.ywcrws)
                        }
                    })
                }
            });
        },
        tabChange2(name) {
            if (name == "累计一次加工合格") {
                this.$nextTick(() => {
                    echarts
                        .init(this.$refs.leijiyicijiagonghegeDom)
                        .setOption(this.option21);
                });
            } else if (name == "报废品率") {
                this.$nextTick(() => {
                    echarts
                        .init(this.$refs.baofeipinlvDom)
                        .setOption(this.option22);
                });
            } else if (name == "产品合格率") {
                this.$nextTick(() => {
                    echarts
                        .init(this.$refs.chanpinhegelvDom)
                        .setOption(this.option23);
                });
            }
        },
        tabChange3(name) {
            if (name == "检验产品总数") {
                this.$nextTick(() => {
                    echarts
                        .init(this.$refs.jianyanchanpinzongshuDom)
                        .setOption(this.option31);
                });
            } else if (name == "累计合格") {
                this.$nextTick(() => {
                    echarts
                        .init(this.$refs.leijihegeDom)
                        .setOption(this.option32);
                });
            } else if (name == "累计不合格") {
                this.$nextTick(() => {
                    echarts
                        .init(this.$refs.leijibuhegeDom)
                        .setOption(this.option32);
                });
            }
        },
        tabChange6(name) {
            if (name == "问题类型分布") {
                this.$nextTick(() => {
                    echarts
                        .init(this.$refs.wentileixingfenbuzhanbiDom)
                        .setOption(this.option611);
                    echarts
                        .init(this.$refs.jiejuecuoshiDom)
                        .setOption(this.option612);
                });
            } else if (name == "责任分布") {
                this.$nextTick(() => {
                    echarts
                        .init(this.$refs.buhegezerenfenbuzhanbiDom)
                        .setOption(this.option621);
                    echarts
                        .init(this.$refs.zuizhongjieguoDom)
                        .setOption(this.option622);
                });
            }
        },
    },
};
</script>
<style lang="scss" scoped>
	.el-table td>.cell {
		padding-left: 10px;
	}

	.el-table {
		height: 220px;
	}

	.el-table .warning-row {
		background: rgb(52, 57, 70);
	}

	.el-table .success-row {
		background: rgb(52, 57, 70);
	}

	.el-table .odd-row {
		background: rgb(29, 35, 49);
	}

	.el-table .el-table__cell {
		font-size: 18px !important;
		text-align: center;
	}

	.table_ {
		width: 100%;
		height: 250px;
		background: rgba(255, 255, 255, 0.05);
		position: relative;
	}

	.table_ .el-table__row {
		height: 42px;
		/* 设置行高为50px */
		line-height: 42px;
		/* 设置行内文本垂直居中 */
	}
	.table_ .el-table__row td{
		height: 42px;
		/* 设置行高为50px */
		line-height: 42px;
		/* 设置行内文本垂直居中 */
	}
	.table_ .el-table__row td .cell{
		height: 42px;
		/* 设置行高为50px */
		line-height: 42px !important;
		/* 设置行内文本垂直居中 */
	}

	.el-table th {
		background-color: rgb(29, 35, 49);
		color: #409eff;
	}

	.el-table {
		background: rgb(29, 35, 49);
		color: #dddddd;
	}

	.table_2 {
		width: 100%;
		height: 250px;
		background: rgba(255, 255, 255, 0.05);
		position: relative;
	}

	.table_2 .el-table__row {
		height: 75px;
		/* 设置行高为50px */
		line-height: 75px;
		/* 设置行内文本垂直居中 */
	}

	.table-wrapper {
		position: relative;
		/* 设置表格总高度，包含表头 */
	}

	.table-header .el-table {
		height: 44px;
	}

	.table-header {
		/* 表头固定在顶部 */
		position: relative;
		top: 0;
		height: 44px;
		z-index: 1;
		/* 确保表头在上层 */
	}

	.scroll-wrapper {
		/* 表格内容容器，滚动的部分 */
		// height: 270px;
		/* 隐藏溢出的内容 */
		// position: relative;
		// display: block;
		overflow: hidden;
	}

	.scroll-wrapper .el-table__body {
		/* 内容部分需要启用平滑滚动效果 */
		will-change: transform;
	}

	.chart_ {
		width: 100%;
		height: 100%;
		background: rgba(255, 255, 255, 0.05);
	}

	.page_header {
		height: 80px;
		line-height: 70px;
		background: url(./top.png) no-repeat;
		background-size: cover;
		font-weight: 600;
		font-size: 24px;
		color: #ffffff;
		text-align: center;
        span{
            font-weight: 600;
            font-size: 40px;
            color: #ffffff;
            text-shadow: 0px 10px 10px rgba(0, 0, 0, 0.2);
            background: linear-gradient(0deg, #99bbff 0%, #ffffff 100%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-align: center;
            padding-top: 36px;
        }
	}

	.HomePageClass {
		width: 1920px;
		height: 1080px;
		background: #111726;
		display: flex;
		flex-direction: column;

		.homeContent {
			flex: auto;
			position: relative;
			margin-top: -60px;

			.homeBody {
				width: 100%;
				height: calc(100% - 65px);
				margin-top: 65px;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				padding: 0 40px 40px 40px;

				&>div {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
				}

				.home_top {
					height: 640px;

					&>div {
						flex-shrink: 0;

						&:not(:last-child) {
							margin-right: 40px;
						}
					}

					.l_left,
					.l_center,
					.l_right {
						width: 32%;
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						&>div {
							flex: 1;
						}
					}

					.w_box {
						width: 100%;
						height: 100%;
						display: flex;
						flex-direction: row;

						.w_left,
						.w_right {
							display: flex;
							flex-direction: column;
							background: rgba(255, 255, 255, 0.05);

							.title {
								font-size: 16px;
								color: #DDDDDD;
								padding-left: 10px;
								padding-top: 8px;
								line-height: 24px;
								background-color: rgba(255, 255, 255, 0.05);
							}

							.w_chart {
								flex: auto;
							}
						}

						.w_left {
							width: 40%;
						}

						.w_right {
							flex: auto;
						}
					}
				}

				.home_bottom {
					height: 320px;

					&>div {
						flex-shrink: 0;
					}

					.l_left {
						margin-right: 40px;
						width: 66%;

						.b_box {
							width: 100%;
							height: 100%;
							padding: 0 40px;
							background: rgba(255, 255, 255, 0.05);
							display: flex;
							flex-direction: row;

							.left,
							.right {
								flex: 1;
								display: flex;
								flex-direction: column;

								.title {
									color: #EEEEEE;
									margin-bottom: 20px;
									margin-top: 25px;

									span {
										font-size: 22px;
										margin-right: 9px;
									}

									label {
										font-weight: 600;
										font-size: 22px;
									}
								}

								.content {
									flex: auto;
									display: flex;
									flex-direction: row;
									flex-wrap: wrap;
									justify-content: space-between;

									.block {
										width: 240px;
										height: 68px;
										display: flex;
										flex-direction: row;
										align-items: center;
										margin-bottom: 20px;

										i {
											width: 30px;
											height: 30px;
											margin-left: 10px;
										}

										span {
											font-size: 18px;
											color: #EEEEEE;
											margin-left: 10px;
											width: 120px;
										}

										label {
											font-weight: 600;
											font-size: 18px;
										}
									}

									.bg1 {
										border-left: 4px solid #43a8f4;
										background: rgba(67, 168, 244, 0.2);

										label {
											color: #43a8f4;
										}
									}

									.bg2 {
										border-left: 4px solid #20fcff;
										background: rgba(32, 252, 255, 0.2);

										label {
											color: #20fcff;
										}
									}

									.bg3 {
										border-left: 4px solid #8fcdf0;
										background: rgba(143, 205, 240, 0.2);

										label {
											color: #6fa7c5;
										}
									}

									.bg4 {
										border-left: 4px solid #1a79ff;
										background: rgba(26, 121, 255, 0.2);

										label {
											color: #1a75f4;
										}
									}
								}
							}

							.left {
								margin-right: 80px;
							}
						}
					}

					.l_right {
						width: 32%;
					}

					.l_center {
						flex: auto;
					}
				}
			}
		}
	}
</style>